<template>
	<div class='transform-plan-child'>
		<TopNav
			color="#00493E"
			showBack
			backColor="#01937C"
			:showTitle="false"
		>
			<span class="nav-title">{{course.name}}</span>
		</TopNav>
		<div class="left">
			<div
				class="nav"
				:class="selectNav === index ? 'active' : ''"
				v-for="(item,index) in navs"
				:key="item.component"
				@click="selectNav=index"
			>
				<div
					class="nav-content"
					:class="selectNav === index ? 'active' : ''"
				>
					<div class="index">{{index+1}}</div>
					<div class="label">{{item.label}}</div>
				</div>
			</div>
		</div>
		<div class="right">
			<component
				:is="navs[selectNav].component"
				:course="course"
				:role="role"
				:myAchievement="myAchievement"
				@uploadAchievement="shareModel=true"
			/>
		</div>
		<UploadAchievementModel
			v-if="shareModel"
			@close="shareModel=false"
			@finish="initData"
		/>
	</div>
</template>

<script>
import { getCourse, getMyAchievement } from '@/api/course'
import StepsYounger from '../components/StepsYounger'
import Teaching from './components/Teaching'
import Achievement from './components/Achievement'
import QA from '../components/QA'
import UploadAchievementModel from '../components/UploadAchievementModel'

export default {
  components: {
    StepsYounger,
    Teaching,
    Achievement,
    QA,
    UploadAchievementModel
  },
  props: {
    role: {
      type: String,
      default: 'parent'
    }
  },
  data() {
    return {
      id: '',
      course: null,
      navs: [
        { label: '改造准备', component: 'StepsYounger' },
        { label: '改造教学', component: 'Teaching' },
        { label: '常见问题', component: 'QA' },
        { label: '改造成果', component: 'Achievement' },
      ],
      selectNav: 0,
      myAchievement: null,
      shareModel: false
    }
  },
  watch: {
    selectNav: function(val) {
      this.$replaceTo(this.$route.name, {
        ...this.$route.query,
        step: val,
      })
    }
  },
  created() {
    this.id = this.$route.query.id
    this.selectNav = this.$route.query.step ? +this.$route.query.step : 0
    this.initData()
  },
  methods: {
    initData() {
      this.course = getCourse(this.id)
      this.myAchievement = getMyAchievement(this.id)
      console.log(this.myAchievement)
    }
  }
}
</script>

<style lang='scss' scoped>
.transform-plan-child {
  display: flex;
  height: 100vh;
  padding: 90px 0 10px 40px;
  overflow: hidden;
  background-color: #ffffff;

  .nav-title {
    position: absolute;
    right: 55px;
  }

  .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 55px;
    border-right: 2px solid rgba(0, 62, 52, 0.08);

    .nav {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      width: 250px;
      margin-bottom: 26px;
      cursor: pointer;
      background: #eff3f3;
      border-radius: 14px;

      &.active {
        background-color: #00c9a9;
      }

      &-content {
        display: flex;
        align-items: center;
        justify-content: center;

        .index {
          margin-right: 40px;
          font-size: 50px;
          color: rgba(0, 62, 52, 0.15);
        }

        .label {
          font-size: 30px;
          color: rgba(0, 62, 52, 0.55);
        }

        &.active {
          .index {
            color: #ffffff;
          }

          .label {
            color: #ffffff;
          }
        }
      }
    }
  }

  .right {
    flex: 1;
    padding-left: 60px;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>
